import 'package:flutter/material.dart';
import 'package:love_app/common/path_clipper.dart';
import 'package:love_app/common/su.dart';
import 'package:love_app/providers/love_record_provider.dart';
import 'package:love_app/model/love_record_model.dart' as LRModel;
import 'package:love_app/providers/share_provider.dart';
import 'package:love_app/routes/application.dart';
import 'package:love_app/service/delete_love_record.dart';
import 'package:provider/provider.dart';

import 'love_record_ui/centent.dart';

// 查看恋爱记录详情
class DetailsItem extends StatefulWidget {
  final int itemID; // itemID

  const DetailsItem({Key key, this.itemID}) : super(key: key);

  @override
  _DetailsItemState createState() => _DetailsItemState();
}

class _DetailsItemState extends State<DetailsItem> {
  bool showTop; // 是否显示顶层
  double opacityLevel; // 过去效果

  @override
  void initState() {
    showTop = false;
    opacityLevel = 1.0;
    super.initState();
  }

  LoveRecordProvider _loveRecordProvider; // 获取共享数据
  ShareProvider _shareProvider;
  @override
  Widget build(BuildContext context) {
    _loveRecordProvider =
        Provider.of<LoveRecordProvider>(context, listen: false);
    _shareProvider = Provider.of<ShareProvider>(context, listen: false);

    Widget topWidget = showTop == true ? _topWidget() : Container();

    return Stack(
      children: <Widget>[
        Scaffold(
          appBar: _myAppbar(context),
          backgroundColor: Colors.white,
          body: _body(),
        ),
        topWidget,
      ],
    );
  }

  // 内容
  Widget _body() {
    LRModel.Data itemData =
        _loveRecordProvider.getWidgetByItemID(widget.itemID);
    return Container(
      child: BuildItem(textShowAll: true).everyItem(itemData),
    );
  }

  // 自定义appBar
  Widget _myAppbar(BuildContext context) {
    return AppBar(
      title: Text(
        '记录',
        style: Su().textStyle(Colors.black, 36),
      ),
      backgroundColor: Colors.white,
      elevation: 2, // 阴影
      // leading: ,
      centerTitle: true,
      leading: _leadingIcon(context),
      actions: _acitonIcon(),
    );
  }

  // leading按钮
  Widget _leadingIcon(BuildContext context) {
    return IconButton(
      icon: Icon(
        Icons.arrow_back_ios,
        size: Su().w(35),
        color: Color.fromRGBO(238, 135, 176, 1),
      ),
      onPressed: () {
        Navigator.pop(context);
      },
    );
  }

  // 自定义action
  List<Widget> _acitonIcon() {
    return <Widget>[
      IconButton(
        icon: Icon(
          Icons.more_horiz,
          size: Su().w(35),
          color: Color.fromRGBO(238, 135, 176, 1),
        ),
        onPressed: () {
          setState(() {
            showTop = true;
          });
          // _changeOpacity();
        },
      ),
    ];
  }

  // 顶部层的widget，点击右上角三个小圆点显示
  Widget _topWidget() {
    return Material(
      color: Color.fromRGBO(0, 0, 0, 0.12),
      child: InkWell(
        onTap: () {
          setState(() {
            showTop = false;
          });
          _topWidget();
        },
        child: Stack(
          children: <Widget>[
            Container(
              width: Su().w(750),
              height: Su().h(1334),
            ),
            Positioned(
              top: Su().h(123),
              right: Su().w(13),
              child: _showBox(),
            ),
          ],
        ),
      ),
    );
  }

  // 包裹三角形和矩形
  Widget _showBox() {
    return Container(
      width: Su().w(255.7),
      height: Su().h(105),
      child: Stack(
        children: <Widget>[
          Positioned(
            bottom: 0,
            child: _box(),
          ),
          Positioned(
            right: Su().w(20),
            top: 0,
            child: _triangle(),
          ),
        ],
      ),
    );
  }

  // 三角形
  Widget _triangle() {
    return ClipPath(
      clipper: MyPathClipper(),
      child: Container(
        width: Su().w(30),
        height: Su().w(25),
        decoration: BoxDecoration(
          color: Colors.white,
        ),
      ),
    );
  }

// 矩形，删除记录
  Widget _box() {
    return InkWell(
      onTap: () async {
        // 发起网络请求
        String token = _shareProvider.token;
        String fromToken = _shareProvider.formToken;
        bool success = await DeleteLoveLog().delete(token, fromToken, widget.itemID);
        if(success == true){
          _shareProvider.updateFormToken(); // 更新全局唯一的fromToken    
          _loveRecordProvider.deleteItemAndUpdate(widget.itemID);
          Application.router.pop(context);
        }
      },
      child: Container(
        width: Su().w(255.7),
        height: Su().h(80),
        alignment: Alignment.center,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(Su().w(9)),
        ),
        child: Text(
          "删除记录",
          style: Su().textStyle(Colors.black, 28),
        ),
      ),
    );
  }
}
